<template>
	<view :class="cstyle" class="cLabelT ">
		<view
			v-if="mode != 'img' && mode != 'textarea'&& mode != 'video'&& mode != 'videos'&& mode != 'textareas'&&mode!='selector1'&&mode!='selector2'&&mode!='date1'&&mode!='selector3'&&mode!='selector4'&&mode!='select'"
			:class="['c-'+size,disabled ? 'disabled':'']" class="cLabel cu-form-group"
			:style="flex ? 'display: flex;' : '',`margin-top:${top}`">
			<!-- :style="`margin-top:${top}`" -->
			<view>
				<!-- ../../static/Scope.png  textareas-->
				<!-- @/static/Scope.png -->
				<!-- :src="must=='must'?mustIcon:unIcon" -->
				<image class="img" :src="must=='must'?mustIcon:unIcon"></image>
			</view>
			<view class="cLabel-l text-cuts title" v-if="title" :class="flex ? 'flex-l': 'noflex'">{{title}}</view>
			<!-- :style="{'width':over}" -->
			<view class="cLabel-mw">
				<view class="cLabel-m text-cuts " :style="{'text-align':align}">
					<!-- mode='' -->
					<view v-if="mode == ''">{{dataText}}</view>
					<!-- mode='text' || 'nrmber' || 'idcard' -->
					<view v-if="mode == 'text'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="text" @focus='handFocus' @input='handInput'
							@change='handInputs' :disabled='disabled' @blur="handBlur" v-model="inputValue"
							:placeholder="placeholder? placeholder : '请输入'" />
					</view>


					<view v-if="mode == 'text1'">
						<view style="display: flex;height: 42rpx;">
							<view style="font-size: 26rpx;">{{textTitle[0]}}</view>
							<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
								placeholder-class="input-placeholder" type="text" @input='handInput' @focus='handFocus'
								:disabled='disabled' @blur="handBlur" v-model="inputValue"
								:placeholder="placeholder? placeholder : '请输入'" />
							<view style="font-size: 26rpx;">{{textTitle[2]}}</view>
						</view>

					</view>
					<view v-if="mode == 'text2'">
						<view style="display: flex;height: 42rpx;font-size: 24rpx;justify-content: flex-end;">
							<view>{{textTitle[0]}}</view>
							<view style="color: red;margin: 3rpx 8rpx 0;">xxx </view>


							<view>{{textTitle[2]}}</view>


						</view>

					</view>
					<view v-if="mode == 'number'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="number" @input='handInput' @focus='handFocus'
							:disabled='disabled' @blur="handBlur" v-model="inputValue"
							:placeholder="placeholder? placeholder : '请输入' " />
					</view>
					<view v-if="mode == 'idcard'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="idcard" @input='handInput' @focus='handFocus'
							:disabled='disabled' @blur="handBlur" v-model="inputValue"
							:placeholder="placeholder? placeholder : '请输入'" />
					</view>
					<view v-if="mode == 'password'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="text" password @input='handInput'
							@focus='handFocus' :disabled='disabled' @blur="handBlur" v-model="inputValue"
							:placeholder="placeholder? placeholder : '点击输入'+title " />
					</view>
					<!-- mode='switch' -->
					<view v-if="mode == 'switch'">
						<switch @change="switchChange" :class="dataText?'checked':''" :disabled='disabled'
							:checked="dataText?true:false"></switch>
					</view>

					<view v-if="mode == 'checkbox'">
						<uni-data-checkbox multiple @change="change" v-model="formData.selectList"
							:localdata="selectList" :name="name"></uni-data-checkbox>
					</view>

					<!-- <view class="cLabel" :style="`margin-top:${top}`" v-if="mode == 'checkbox'"
			:class="['c-'+size,disabled ? 'disabled':'']">
			<view class="textarea-t">
				<view class="cLabel-l text-cuts textarea-l" v-if="title">{{title}}</view>
				<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
			</view>
			<view v-if="mode == 'checkbox'" class='c-textarea'>
				<uni-data-checkbox multiple @change="change" v-model="formData.selectList" :localdata="selectList"
					:name="name"></uni-data-checkbox>
			</view>
		</view> -->

					<!-- moed='selector' -->
					<!-- style="{color:fieldindex>-1?'#555':'#a0a0a0'}" -->
					<view v-if="mode == 'selector'">
						<view v-if="mode == 'selector'" @tap="toggle('selector')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<cPicker v-if="mode == 'selector'" :name="name" mode="selector" :defaultVal="defaultVal"
							@confirm="hand" :disabledAfter="true" ref="selector" :themeColor="themeColor"
							:selectList="selectList">
						</cPicker>
					</view>
					<!-- 选择人单选 -->
					<view v-if="mode == 'select'">
						<view v-if="mode == 'select'" @tap="toggle1('select')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<personTree ref="select" :multipleselect="multipleselect" :selectParent="selectParent1"
							:multiple="multiple1" :range="personList" :foldAll="flod1" rangeKey="fShortName"
							@confirm="treeConfirms" @cancel="treeCancels"></personTree>
					</view>
					<view v-if="mode == 'company'" style="display: flex;justify-content: flex-end;">
						<view v-if="mode == 'company'" @tap="toggle2('company',disabled)" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}"
							style="overflow-x: auto;max-width: 400upx;text-align: right;">{{ nData }}</view>
						<!-- <personTree ref="select" :multipleselect="multipleselect" :selectParent="selectParent1"
							:multiple="multiple1" :range="personList" :foldAll="flod1" rangeKey="fShortName"
							@confirm="treeConfirms" @cancel="treeCancels"></personTree> -->
						<tki-tree ref="company" :shortName="shortName" :nodeKey="nodeKey" :selectParent="selectParent"
							:multiple="multiple" :range="range" :foldAll="flod" :rangeKey="rangeKeys"
							@confirm="treeConfirm" @cancel="treeCancel">
						</tki-tree>



					</view>
					<view v-if="mode == 'selectors'">
						<view v-if="mode == 'selectors'" @tap="toggle('selectors')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<cPicker v-if="mode == 'selectors'" mode="selectors" :defaultVal="defaultVal" @confirm="hand"
							:disabledAfter="true" ref="selectors" :themeColor="themeColor" :selectList="selectList">
						</cPicker>
					</view>

					<!-- moed='half' -->
					<view v-if="mode == 'half'">
						<view v-if="mode == 'half'" @tap="toggle('half')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData}}</view>
						<cPicker v-if="mode == 'half'" mode="half" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="half"
							:themeColor="themeColor"></cPicker>
					</view>

					<!-- moed='date' -->
					<view v-if="mode == 'date'">
						<view v-if="mode == 'date'" @tap="toggle('date')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<cPicker v-if="mode == 'date'" mode="date" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="date"
							:themeColor="themeColor"></cPicker>
					</view>

					<view v-if="mode == 'yearMonth'">
						<view v-if="mode == 'yearMonth'" @tap="toggle('yearMonth')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'yearMonth'" mode="yearMonth" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="yearMonth" :themeColor="themeColor"></cPicker>
					</view>
					<!-- 年月日时分  minute -->
					<view v-if="mode == 'minute'">
						<view v-if="mode == 'minute'" @tap="toggle('minute')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData}}</view>
						<cPicker v-if="mode == 'minute'" mode="minute" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="minute" :themeColor="themeColor"></cPicker>

					</view>
					<!--年月日时分秒 -->
					<view v-if="mode == 'dateTime'">
						<!-- nData -->
						<view v-if="mode == 'dateTime'" @tap="toggle('dateTime')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'dateTime'" mode="dateTime" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="dateTime" :themeColor="themeColor"></cPicker>
					</view>

					<view v-if="mode == 'range'">
						<view v-if="mode == 'range'" @tap="toggle('range')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'range'" mode="range" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="range" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='time' -->
					<view v-if="mode == 'time'">
						<view v-if="mode == 'time'" @tap="toggle('time')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'time'" mode="time" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="time"
							:themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='region' -->
					<view v-if="mode == 'region'">
						<view v-if="mode == 'region'" @tap="toggle('region')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'region'" mode="region" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="region" :themeColor="themeColor"></cPicker>
					</view>

					<view v-if="mode == 'limit'">
						<view v-if="mode == 'limit'" @tap="toggle('limit')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'limit'" mode="limit" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="limit" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='limitHour' -->
					<view v-if="mode == 'limitHour'">
						<view v-if="mode == 'limitHour'" @tap="toggle('limitHour')" class="text_align"
							style="text-align: right;" :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'limitHour'" mode="limitHour" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="limitHour" :themeColor="themeColor"></cPicker>
					</view>


				</view>
				<view v-if="rightText || rightIcon" @tap="handRight">
					<view :class="rightIcon">{{rightText}}</view>
				</view>
				<!-- <view   v-if="rightIcon" >
					<view  ></view>
				</view> -->
			</view>
		</view>

		<view v-if="mode == 'selector1'||mode=='selector2'||mode=='selector3'||mode=='date1'||mode=='selector4'||mode=='select'">
			<view class="cLabel cu-form-group" :style="flex ? 'display: flex;' : '',`margin-top:${top}`">
				<view>
					<image class="img" :src="must=='must'?mustIcon:unIcon"></image>
				</view>
				<view class="cLabel-l text-cuts title" v-if="title" :class="flex ? 'flex-l': 'noflex'"
					:style="{'min-width':over}">{{title}}</view>


				<picker :disabled='disabled' v-if="mode == 'selector1'" @change="BusinessPicker($event,selectList,name)"
					:value="index" :range="selectList" :range-key="name">
					<view class="picker" :style="{color:Businessindex>-1?'#555':'#a0a0a0'}">
						{{Businessindex>-1?nData:placeholderText}}

					</view>
				</picker>
				<picker v-if="mode == 'selector3'" :disabled='disabled'
					@change="BusinessPickers($event,selectList,name)" :value="index" :range="selectList"
					:range-key="name">
					<view class="picker" :style="{color:Businessindex>-1?'#555':'#a0a0a0'}">
						{{Businessindex>-1?nData:'请选择'}}

					</view>
				</picker>
				<!-- 全部 -->
				<picker v-if="mode == 'selector4'" :disabled='disabled' @change="totalPickers($event,selectList,name)"
					:value="index" :range="selectList" :range-key="name">
					<view class="picker" :style="{color:Businessindex>-1?'#555':'#a0a0a0'}">
						{{Businessindex>-1?nData:'请选择'}}
					</view>
				</picker>

				<picker v-if="mode == 'selector2'" :disabled='disabled' @change="fWorktypePicker($event,selectList)"
					:value="index" :range="selectList">
					<view class="picker" :style="{color:Businessindex>-1?'#555':'#a0a0a0'}">
						{{Businessindex>-1?nData:placeholderText}}
					</view>
				</picker>
				<picker v-if="mode == 'select'" :disabled='disabled' @change="fWorktypePicker($event,selectList)"
					:value="index" :range="selectList">
					<view class="pickerSAelect picker" :style="{color:Businessindex>-1?'#555':'#a0a0a0'}">
						{{Businessindex>-1?nData:placeholderText}}
					</view>
				</picker>
				<picker :disabled='disabled' v-if="mode == 'date1'" mode="date" :value="nData" start="1964-09-01"
					end="2080-09-01" @change="interDateChange">
					<view class="picker">
						{{nData}}
					</view>
				</picker>
			</view>
		</view>
		<view class="cLabel" :style="`margin-top:${top}`" v-if="mode == 'textarea'||mode == 'textareas'"
			:class="['c-'+size,disabled ? 'disabled':'']">

			<view class="textarea-t">

				<view class="cLabel-l text-cuts textarea-l" v-if="title" style="display: flex;">
					<view>

						<image class="img" :src="must=='must'?mustIcon:unIcon"></image>
					</view>
					{{title}}
				</view>
				<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				<view class="cLabel-r" v-if="rightIcon">
					<!-- <view :class="rightIcon" @tap="handRight"></view> -->
				</view>
			</view>

			<view v-if="mode == 'textarea'" class='c-textarea'>

				<textarea :placeholder="placeholder? placeholder : '请输入'" :disabled='disabled' id="forFocus"
					v-model="inputValue" @input="handInput" @blur="handBlur" :maxlength="maxlength"></textarea>
				<label v-if="showNumber" for="forFocus" class="c-textarea-count ">{{textateaL}}/{{maxlength}}</label>
			</view>


			<view v-if="mode == 'textareas'" class='c-textarea'>

				<textarea :placeholder="placeholder? placeholder : '请选择'" :disabled='true' id="forFocus"
					v-model="inputValue" @input="handInput" @focus="handFocus" @tap="handFocus" @blur="handBlur"
					:maxlength="maxlength"></textarea>
				<label v-if="showNumber" for="forFocus" class="c-textarea-count ">{{textateaL}}/{{maxlength}}</label>
			</view>
		</view>
		<!-- 	<view class="cLabel" :style="`margin-top:${top}`" v-if="mode == 'checkbox'"
			:class="['c-'+size,disabled ? 'disabled':'']">
			<view class="textarea-t">
				<view class="cLabel-l text-cuts textarea-l" v-if="title">{{title}}</view>
				<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
			</view>
			<view v-if="mode == 'checkbox'" class='c-textarea'>
				<uni-data-checkbox multiple @change="change" v-model="formData.selectList" :localdata="selectList"
					:name="name"></uni-data-checkbox>
			</view>
		</view> -->
		<view class="cLabel" v-if="mode == 'img'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l img-l">

				<view class="text-lg" style="display: flex;font-size: 30upx;">
					<view>

						<image class="img" :src="must=='must'?mustIcon:unIcon"></image>
					</view>
					<view :style="{color:ishow?'#333':'rgb(152, 152, 152)'}">{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view class="action">
					{{inputValue.length}}/{{imgL}}
				</view>
			</view>
			<view class="grid col-4 grid-square flex-sub " v-if="ishow">
				<view class="bg-img" v-for="(item,index) in inputValue" :key="index" @tap="ViewImage(index)">
					<image :src="inputValue[index]" mode="aspectFill"></image>
					<view v-if="imgType != 'show'" class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="inputValue.length<imgL && imgType != 'show'">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
			<view class="grid col-4 grid-square flex-sub " v-else>
				<view class="bg-img" v-for="(item,index) in inputValue" :key="index" @tap="ViewImage(index)">
					<image :src="inputValue[index]" mode="aspectFill"></image>

				</view>

			</view>
			<cpImg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="cpimgNumber"
				:fixOrientation="cpimgFixOrientation" :size="cpimgSize" :maxWidth="cpimgMaxWidth" :ql="cpimgQl"
				:type="cpimgType" />
		</view>

		<view class="cLabel" v-if="mode == 'videos'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l vid-l">
				<view class="text-lg" style="display: flex;font-size: 30upx">
					<view>

						<image class="img" :src="must=='must'?mustIcon:unIcon"></image>
					</view>
					<view :style="{color:ishow?'#333':'rgb(152, 152, 152)'}">{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view style="display: flex;">
					<view class="action">
						{{inputValue.length}}/{{vidL}}

					</view>
					<view class="cu-bar bg-white" style="min-height: 30upx;">
						<view class="action">
						</view>
						<view class="action">
							<image @tap.stop="changeContent" style="width: 30upx;height: 30upx;margin-bottom: 20upx;"
								:src="isSrc" :style="{transform:contentShow==true?'rotate(0deg)':'rotate(180deg)'}"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="cu-bar bg-white" style="min-height: 30upx;">
				<view class="action">
				</view>
				<view class="action">
					<image @tap.stop="changeContent" style="width: 30upx;height: 30upx;margin-bottom: 20upx;"
						:src="isSrc" mode=""></image>
				</view>
			</view> -->
			<view class="flex-sub grid-square col-8 grid" v-show="contentShow" v-if="ishow">
				<view class="bg-vid" v-for="(item,index) in inputValue" :key="index">
					<image src="../../static/a.png" style="height: 100%;width: 100%;"
						@tap="interVideo(inputValue[index])"></image>
					<!-- <video :src="inputValue[index]" mode="aspectFill"></video> -->
					<view v-if="vidType != 'show'" class="cu-tag bg-red" @tap.stop="DelVid" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseVid" v-if="inputValue.length<vidL && vidType != 'show'">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>

			<view class="flex-sub grid-square col-8 grid" v-show="contentShow" v-else>
				<view class="bg-vid" v-for="(item,index) in inputValue" :key="index">
					<image src="../../static/a.png" style="height: 100%;width: 100%;"
						@tap="interVideo(inputValue[index])"></image>

				</view>

			</view>
			<cpVid ref="cpvid" @result="cpvidOk" @err="cpvidErr" :number="cpvidNumber"
				:fixOrientation="cpvidFixOrientation" :size="cpvidSize" :maxWidth="cpvidMaxWidth" :ql="cpvidQl"
				:type="cpvidType" />
		</view>


		<!-- <view class="cLabel" v-if="mode == 'video'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l img-l">
				<view class="text-lg">
					<view>{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view class="action">
					{{fastImgLists.length}}/{{maxNum}}
				</view>
			</view>
			<view class="items" style="background-color: #fff;" v-for="(item, index) in fastImgLists" :key="index">
				<view class="bg-img" v-if="item.type == 'video'"
					style="position:relative;display: flex;justify-content: center;align-items: center;width: 80%;margin:auto;padding: 20upx 0;">
			
					<video v-show="fastImgLists[index].needload != 'true'" :src="item.filePath"></video>
					<view @tap.stop="delectVideo($event,item.id)" class="remove cu-tag bg-red" ::data-index="index"
						style="width: 38upx;height: 38upx;position: absolute;top: 20upx;right: 0;z-index:12;background-color: rgba(0,0,0,0.5);">
						<text class='cuIcon-close'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="solids delete" style="margin-top: 30upx;" v-if="canAdd"
						@tap="sourceTypeChangechooseVideo">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view> -->


	</view>
</template>

<script>
	import personTree from '@/components/tree_02/tki-tree.vue'; //选择人
	import tkiTree from '@/components/tki-tree/tki-tree1.vue'; //选择单位
	import cPicker from "../c-picker/c-picker.vue"
	import cpImg from "../c-upload/cpimg.vue"
	import cpVid from "../c-upload/cpvid.vue"
	import uniDataCheckbox from '@/components/cat-label/uni-data-checkbox.vue'
	import multipleSelect from "@/components/cat-label/multiple-select";
	// var sourceType = [
	// 	['camera'],
	// 	['album'],
	// 	['camera', 'album']
	// ]
	// var maxNum = 6;
	import {
		picker
	} from "./mixins/picker.js"

	function oneOf(value, validList) {

		for (let i = 0; i < validList.length; i++) {
			if (value === validList[i]) {
				// console.log(value)
				return true;
			}
		}
		throw new Error('mode无效，请选择有效的mode!');
		return false;
	}
	export default {
		mixins: [picker],
		components: {
			cPicker,
			cpImg,
			cpVid,
			multipleSelect,
			personTree,
			tkiTree,

		},
		props: {
			// 主体
			mode: {
				type: String,
				validator(mode) {
					// 
					let modeList = ['', 'text', 'text1', 'text2', 'number', 'idcard', 'switch', 'textarea', 'password',
						'img',
						'video',
						'selector', 'selector1', 'selector3', 'selector4',
						'selector2', "date1",'select',
						'half', 'date', 'dateTime', 'yearMonth', "minute", 'time', 'region', 'limit', 'limitHour',
						'range', 'videos', "selectors", "checkbox", "select", "textareas", "company"
					]
					return oneOf(mode, modeList);
				},
				default: "",
			},
			nodeKey: {
				type: String,
				default: 'f_CompanyId'
			},
			detial: {
				type: String,
				default: ''
			},
			shortName: {
				type: String,
				default: 'f_ShortName'
			},
			flagNum: {
				type: Number,
				default: -1,
			},
			rangeKeys: {
				type: String,
				default: 'f_ShortName',
			},

			personList: {
				type: Array,
				default: () => []
			},
			range: {
				type: Array,
				default: () => []
			},
			must: {
				type: String,
				default: 'must',
			},
			disabled: {
				type: Boolean,
				default: false,
			},

			ishow: {
				type: Boolean,
				default: true,
			},
			// select 字段
			name: {
				type: String,
				default: 'labels',
			},
			over: {
				type: String,
				default: 'calc(9em + 15px)',
			},

			top: {
				type: String,
				default: '0upx',
			},
			// 样式类
			cstyle: {
				type: String,
				default: "",
			},
			size: { // medium small mini
				type: String,
				default: "small",
			},
			flex: {
				type: Boolean,
				default: true,
			},
			align: { // left center right
				type: String,
				default: 'left',
			},
			// 文字类
			title: {
				type: String,
				default: "默认占位符1",
			},
			dataText: {
				default: "默认占位符2",
				type: [String, Number, Boolean, Array, Object],
			},
			dataText2: {
				default: "默认占位符3",
				type: [String, Number, Boolean, Array, Object],
			},
			placeholder: {
				type: String,
				// default: "默认占位符"
			},
			leftArr: {
				type: Array,
				default: () => []
				// default: "默认占位符"
			},
			placeholderText: {
				type: String,
				default: "请选择"
			},
			maxlength: {
				type: [Number, String],
				default: 100
			},
			rightText: {
				type: String,
			},
			titlePl: {
				type: String,
				default: "请选择"
			},
			// 状态
			showNumber: {
				type: Boolean,
				default: true,
			},
			clear: {
				type: Boolean,
				default: false,
			},
			// 修饰类
			rightIcon: {
				type: String,
				default: 'cuIcon-right'
			},
			// mode = 'img'
			imgType: { //shou -展示  add - 正常添加  edit-修改
				type: String,
				default: 'add',
			},
			subTitle: {
				type: String,
				default: '',
			},
			imgL: {
				type: Number,
				default: 8,
			},
			imgs: {
				type: Array,
				default: () => []
			},
			vids: {
				type: Array,
				default: () => []
			},
			cpimgSize: { //照片大小超过此值就压缩，且最大宽高等于maxWidth
				type: Number,
				default: 500
			},
			cpimgMaxWidth: { //照片宽高超过此值就压缩，且最大宽高等于此值
				type: Number,
				default: 750
			},
			cpimgQl: { //照片压缩比 0-1	
				type: Number,
				default: 0.92
			},
			cpimgType: {
				type: String,
				default: 'url'
			}, //照片压缩后返回的格式  base64	
			cpimgFixOrientation: {
				type: Boolean,
				default: true
			}, //是否修正图片方向（暂时只支持H5）
			cpimgNumber: {
				type: Number,
				default: 1
			}, //一次压缩图片数量（不支持H5）

			vidL: {
				type: Number,
				default: 6,
			},
			cpvidMaxWidth: { //视频宽高超过此值就压缩，且最大宽高等于此值
				type: Number,
				default: 750
			},
			cpvidSize: { //视频大小超过此值就压缩，且最大宽高等于maxWidth
				type: Number,
				default: 500
			},
			cpvidNumber: {
				type: Number,
				default: 1
			},
			cpvidFixOrientation: {
				type: Boolean,
				default: true
			},
			cpvidType: {
				type: String,
				default: 'url'
			},
			vidType: {
				type: String,
				default: 'add',
			},
			cpvidQl: { //视频压缩比 0-1	
				type: Number,
				default: 0.92
			},
			themeColor: {
				type: String,
				default: '#0863E8',
			},
			startYear: {
				type: String,
				default: '1970-01-01',
			},
			mustIcon: {
				type: String,
				default: require('@/static/Scope.png'),
			},
			unIcon: {
				type: String,
				default: require('@/static/unscope.png'),
			}

		},
		data() {
			return {
				// defaultProps: {
				// 	children: 'children',
				// 	label: 'f_ShortName'
				// },
				defaultSelected: [], //默认选中项
				inputValue: undefined,
				textateaL: 0,
				inputValue1: undefined,
				cimgs: this.imgs,
				formData: {
					value: -1,
					selectList: [-1]
				},
				show: false,

				// inputValue: this.imgs,

				nData: this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择',

				modeList: ['half', 'date', 'dateTime', 'yearMonth', "minute", 'time', 'region', 'selector', 'limit',
					'limitHour',
					'range', "selectors", "checkbox", "select", "textareas", "company", 'selector4', 'selector1',
					'selector3',
					'selector2', "date1",
				],
				cvids: this.vids,


				// fastImgLists: [],
				canAdd: true,
				// videosourceType: ['拍摄', '相册'],
				// videosourceTypeIndex: 2,
				// sourceType: ['拍摄', '相册'],
				// maxNum: 6,
				// mustIcon: "../../../../static/Scope.png",
				// unIcon: "../../../../static/unscope.png",
				isSrc: require('@/static/down.png'),
				contentShow: true,
				multipleselect: false,
				selectParent1: true,
				flod1: true,
				multiple1: false,
				// 被检查单位
				multiple: false,
				selectParent: true,
				flod: true,
				Businessindex: -1,
				index: -1,
				textTitle: [],



			};
		},
		watch: {
			leftArr: {


				handler(val) {
					// console.log(val)
					this.textTitle = val
				},
				immediate: true
			},
			// dataText(val) {
			// 	// if(this.mode == 'text' || this.mode == 'number' || this.mode == 'idcard' || this.mode == 'textarea'){
			// 	// 	this.inputValue = this.dataText
			// 	// }
			// 	this.inputValue = this.dataText
			// 	this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title
			// }
			dataText: {


				handler(val) {



					this.inputValue = this.dataText


					this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择'
					// this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title

					if (this.mode == 'textarea') {
						this.textateaL = val.length;
					}

				},
				// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
				immediate: true

			},
			dataText2: {

				handler(val) {

					this.inputValue1 = this.dataText2

					if (this.mode == 'textarea') {
						this.textateaL = val.length;
					}

					// this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title
				},
				// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
				immediate: true

			},

			flagNum: {
				handler(e) {
					// console.log(e)
					if (e == 0) {
						this.Businessindex = 0
					}
				},
				immediate: true
			}
		},
		methods: {

			// 取消回调事件  复核人
			treeCancels(e) {},
			// 显示树形选择器
			// 确定回调事件
			treeConfirms(e) {
				this.$emit('select', e)
			},
			treeConfirm(e) {
				// console.log(e)
				this.$emit('company', e)
			},
			treeCancel(e) {},
			// 控制视频折叠面板
			changeContent() {
				this.contentShow = !this.contentShow
			},

			interVideo(src) {
				this.$emit('interVideo', src)
			},
			change(e) {

				var data = e.detail.data
				this.$emit('getSelect', data)
				// var a = []
				// data.map((item, index) => {
				// 	a.push(item.fItemName)
				// })
				// this.totalData.fSpecimenage = a.join(",")

			},
			// confirm(data) {

			// 	this.totalData.fSpecimenage = data.map(el => el.fItemName).join(",");
			// 	this.fSpecimenageindex = 0
			// },
			toggle(val) {
				if (this.disabled) {
					return
				}
				this.$refs[val].show();
			},
			toggle1(val) {
				this.$refs[val]._show();
			},
			toggle2(val, e) {
				var that = this
				if (e == false) {
					this.$refs[val]._show();
				} else {
					uni.showToast({
						title: that.titlePl,
						icon: 'none',
						duration: 2000
					})
				}

			},
			BusinessPicker(e, storage, name) {
				var data = storage[e.target.value]
				this.Businessindex = 0
				// console.log(data)
				if (name == 'userName' || name == 'fStaffName') {
					this.$emit('inputs', data);
				} else {
					this.$emit('input', data[name]);
				}
				// console.log('******', e, storage, name);
				// this.$emit('getData', value)
			},
			BusinessPickers(e, storage, name) {
				var data = storage[e.target.value]
				this.Businessindex = 0
				// console.log(data)
				this.$emit('inputs', data)
				// this.$emit('getData', value)
			},
			totalPickers(e, storage, name) {
				// console.log(8888,e, storage, name)
				var data = storage[e.detail.value]
				this.Businessindex = 0
				// console.log(data)
				this.$emit('total', data)

			},
			fWorktypePicker(e, storage) {
				var data = storage[e.target.value]
				this.Businessindex = 0
				// console.log(data)
				this.$emit('input', data)

			},
			// 年月日
			interDateChange(e) {
				// 
				this.$emit('input', e.detail.value)
			},
			hand(value) {
				this.$emit('input', value.result)
				this.$emit('getData', value)
			},
			handRight() {
				this.$emit('handRight')
			},
			switchChange(value) {
				this.$emit('hand', value.detail.value)
			},
			ChooseVid() {
				this.$refs.cpvid._changVid()
			},
			cpvidOk(val) {
				if (val) {
					this.inputValue = this.inputValue.length != 0 ? this.inputValue.concat(val) : val;
					// this.$emit('hands', this.inputValue)
				}
			},
			DelVid(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该项吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.inputValue.splice(e.currentTarget.dataset.index, 1)
							this.$emit('hands', this.inputValue)
						}
					}
				})
			},
			// 
			handFocus(value, num) {
				console.log(888, value, num)
				if (this.mode != 'text1') {
					let val = value.detail.value;
					if (this.mode == 'textarea') {
						this.textateaL = val.length;
					}
					this.$emit('focus', val)
				} else {
					let val = value.detail.value;
					this.$emit('focus', val, num)
				}
			},
			handInput(value, num) {

				if (this.mode != 'text1') {


					let val = value.detail.value;
					if (this.mode == 'textarea') {
						this.textateaL = val.length;
					}
					this.$emit('input', val)
				} else {
					let val = value.detail.value;
					this.$emit('input', val, num)
				}
			},
			handInputs(value, num) {

				console.log(888)
				if (this.mode != 'text1') {


					let val = value.detail.value;
					if (this.mode == 'textarea') {
						this.textateaL = val.length;
					}
					this.$emit('inputs1', val)
				} else {
					let val = value.detail.value;
					this.$emit('inputs1', val, num)
				}
			},
			handBlur(value) {
				// console.log(999, value)
				let val = value.detail.value;
				// if(this.mode == 'idcard'){
				// 	if(!this.cardPatt.test(val)){
				// 		uni.showToast({ title:'请正确输入身份证号码', icon:'none' ,mask:true,duration:2000})
				// 		return
				// 	}
				// }
				this.$emit('blur', val)
			},
			handFocus(value) {

				this.$emit('focus', value)
			},

			// img
			// 图片选择
			ChooseImage() {

				this.$refs.cpimg._changImg()
			},
			// 
			cpimgOk(val) {

				if (val) {
					this.inputValue = this.inputValue.length != 0 ? this.inputValue.concat(val) : val;

					this.$emit('hand', val, this.inputValue)
				}
			},
			cpimgErr(val) {

			},
			cpvidErr(val) {

			},
			// 删除图片
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该项吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							// console.log(e)
							this.inputValue.splice(e.currentTarget.dataset.index, 1)
							this.$emit('delImg', this.inputValue)
						}
					}
				})
			},
			// 预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.inputValue,
					current: e
				});
			},


			sourceTypeChangechooseVideo() {
				var that = this
				uni.showActionSheet({
					title: '选择类型',
					itemList: this.videosourceType,
					success: e => {
						// fVideofile
						that.videosourceTypeIndex = e.tapIndex
						that.chooseVideo(that.videosourceTypeIndex)

					}
				});
			},
			// chooseVideo: function(e) {


			// 	let _this = this;

			// 	uni.chooseVideo({

			// 		sourceType: sourceType[e],
			// 		maxDuration: 60,
			// 		success: res => {
			// 			uni.showLoading({
			// 				title: '上传中',
			// 				mask: true
			// 			})

			// 			var videoSrc = res.tempFilePath



			// 			var uploadTask = uni.uploadFile({
			// 				url: "http://129.28.66.56:8052/roadScreen/App/upload/uploadFile.do",
			// 				method: "POST",
			// 				header: {
			// 					'Authorization': 'bearer ' + uni.getStorageSync('token')
			// 				},
			// 				formData: {
			// 					folderid: '123456',
			// 					userId: "e4ae1cb0-93cb-4e07-b05c-a35139844b80", // 当前登录用户的 id
			// 					userName: "贺楠",
			// 				},
			// 				filePath: videoSrc,
			// 				name: 'file',
			// 				success: (res) => {


			// 					var imgSrc = JSON.parse(res.data)[0].atta.fFilepath
			// 					var src;
			// 					if (imgSrc.indexOf("mp4") != -1 && imgSrc.indexOf("D:") != -
			// 						1) {
			// 						imgSrc = imgSrc.replace(/D:/, "http://129.28.66.56:8301/")
			// 						src = imgSrc.replace(/mp4/, "jpg")
			// 					} else {
			// 						src =
			// 							"http://www.limsapp.cn/Content/Upload/Uploadify/Images/BusArticle/20190620/s_jcf57o3caowhkrv1hx32.png"
			// 					}


			// 					uni.hideLoading()

			// 					let imgitem = {};
			// 					imgitem.type = 'video';

			// 					imgitem.id = JSON.parse(res.data)[0].atta.fId

			// 					imgitem.src = src;
			// 					imgitem.filePath = videoSrc;
			// 					imgitem.needload = false;
			// 					_this.fastImgLists.push(imgitem);
			// 					//v-for的list数量大于六时，添加标志隐藏
			// 					if (_this.fastImgLists.length >= maxNum) {
			// 						_this.canAdd = false;
			// 					}




			// 				},
			// 				fail(res) {

			// 				}
			// 			})

			// 			uploadTask.onProgressUpdate(function(res) {
			// 				_this.pgList = res.progress;
			// 				setTimeout(() => {
			// 					_this.progress = false
			// 				}, 1500)

			// 			});
			// 		},
			// 		fail: (err) => {
			// 			// #ifdef MP
			// 			uni.getSetting({
			// 				success: (res) => {
			// 					let authStatus = false;
			// 					switch (this.videosourceTypeIndex) {
			// 						case 0:
			// 							authStatus = res.authSetting['scope.camera'];
			// 							break;
			// 						case 1:
			// 							authStatus = res.authSetting['scope.album'];
			// 							break;
			// 						case 2:
			// 							authStatus = res.authSetting['scope.album'] && res
			// 								.authSetting['scope.camera'];
			// 							break;
			// 						default:
			// 							break;
			// 					}
			// 					if (!authStatus) {
			// 						uni.showModal({
			// 							title: '授权失败',
			// 							content: 'Hello uni-app需要从您的相机或相册获取视频，请在设置界面打开相关权限',
			// 							success: (res) => {
			// 								if (res.confirm) {
			// 									uni.openSetting()
			// 								}
			// 							}
			// 						})
			// 					}
			// 				}
			// 			})
			// 			// #endif
			// 		}
			// 	});
			// },
			// 视频详情  hands

			//移除
			// delectVideo(e, id) {

			// 	let _this = this;

			// 	var index = e.currentTarget.id.replace('grace-items-img-', '');
			// 	_this.fastImgLists.splice(index, 1);
			// 	_this.totalData.recordfiles.push({
			// 		fId: id
			// 	})

			// 	if (_this.fastImgLists.length < maxNum) {
			// 		_this.canAdd = true;
			// 	}
			// },
		}
	}
</script>

<style lang="scss">
	.cLabelT {
		position: relative;
	}

	.cLabel {
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1upx solid rgba(0, 0, 0, .1);

		border-top: 1upx solid rgba(0, 0, 0, .1);
	}

	.cLabel-mw {
		display: flex;
		justify-content: space-between;
		flex: 2;
		align-items: center;
	}

	.cLabel-m {
		flex: 2;
	}


	.text-cuts {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-weight: 400;
		// color: #606266;
		// color: rgb(160, 160, 160);
		font-size: 30upx;
	}

	.flex-l {
		// width: calc(9em + 15px)
	}

	.noflex {
		margin-bottom: 15px;
	}

	.img {
		width: 30upx;
		height: 30upx;
		vertical-align: middle;
	}

	.cLabel-r {
		margin-left: 20upx;
	}

	// sizeh
	.c-mini {
		padding: 10upx 0;
		margin: 0 10upx;
		font-size: 28upx;
		font-weight: 600;
	}

	.c-small {
		padding: 20upx 30upx;
		// margin: 0 20px;
		font-size: 28upx;

		// font-weight: 700;
		background-color: #fff;
	}

	.c-medium {
		padding: 20upx 0;
		margin: 0 20upx;
		font-size: 36upx;
		font-weight: 800;
	}


	.c-textarea {
		overflow: hidden;
		position: relative;
		padding-bottom: 30upx;
		padding-left: 30upx;
	}

	.c-textarea-count {
		position: absolute;
		font-size: 24upx;
		line-height: 32upx;
		bottom: 10upx;
		right: 0px;
		color: #999;
	}

	.c-textarea textarea {
		height: 160upx;
		font-size: inherit;
		display: block;
		width: 100%;
		border: 0;
		box-sizing: border-box;
		outline: 0;
		resize: none;
	}

	.c-textarea:focus-within {
		border-color: #00a5e0;
	}

	.disabled,
	.disabled .uni-input-placeholder,

	.disabled .input-placeholder {
		// color: #aaa;
		color: #333;
	}

	.disabled .disabledInp {
		color: #333;
	}

	// mode = 'switch'

	// mode = textarea
	.textarea-t {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.textarea-l {
		margin-bottom: 30upx
	}

	// mode=img
	.img-l {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30upx;
		align-items: center;
	}

	.img-l .action {
		font-size: 24upx;
		color: #999;
	}

	.subTitle {
		font-size: 12px;
	}


	.uni-input-placeholder {
		color: rgb(160, 160, 160) !important;
		font-size: 28upx;
		text-align: right;
		margin-right: 60upx;
	}

	.uni-input-input {
		color: #333 !important;
		font-size: 28upx;

		padding-right: quote($string: 0u)30px;
		text-align: right;
	}

	.flex-l {
		color: #333 !important;
		font-size: 30upx;
	}

	// 借用 colorui
	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-sub {
		flex: 1;
	}

	.grid.grid-square>uni-view>uni-text[class*="cuIcon-"] {
		font-size: 52upx;
		position: absolute;
		color: #8799a3;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border: 1upx solid #333;
	}

	.bg-img {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.grid.grid-square .cu-tag {
		position: absolute;
		right: 0;
		top: 0;
		border-bottom-left-radius: 3px;
		padding: 6upx 12upx;
		height: auto;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	.grid.grid-square>uni-view.bg-img uni-image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.grid.grid-square>uni-view.bg-vid uni-video {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.cu-tag {
		font-size: 24upx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0px 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.solids::after {
		border: 8upx solid #eee;
	}

	.cuIcon-cameraadd:before {
		// content: "+";
	}

	.grid.col-4.grid-square>uni-view {
		padding-bottom: calc((100% - 30px)/4);
		height: 0;
		width: calc((100% - 30px)/4);
	}

	.grid.col-4>uni-view {
		width: 25%;
	}

	.vid-l {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 15px;
		align-items: center;
	}

	.vid-l .action {
		font-size: 12px;
		color: #999;
	}

	.grid.col-8.grid-square>.bg-vid {
		// padding-bottom: calc((100% - 30px)/4);

		padding-bottom: 0 !important;



		// border: 5px solid red;
		// height: 0;
		// width: calc((100% - 30px)/4);
	}

	.grid.col-8 {
		// padding: 0 20px;
		// display: flex;
		// justify-content: center;
	}

	.grid.col-8>.bg-vid {
		width: 100%;
		height: 150px;
		display: flex;
		justify-content: center;


	}

	.grid.col-8.grid-square>.solids {
		padding-bottom: calc((100% - 30px)/4);
		height: 0;
		width: calc((100% - 30px)/4);
	}

	.grid.col-8>.solids {
		width: 25%;

	}

	.bg-vid {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.grid.grid-square>uni-view {
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}

	// 可删除
	.cuIcon-attentionforbidfill:before,
	.cuIcon-remind:before,
	.cuIcon-vipcard:before,
	.cuIcon-people:before,
	.cuIcon-attentionfill:before,
	.cuIcon-locationfill:before {
		content: "@"
	}

	.cuIcon-close {
		position: relative;
		z-index: 66;
	}

	.cuIcon-close:before {
		content: "×";

	}

	.cuIcon-right:before {
		// content: ">";
		font-family: cuIcon;
		display: block;
		content: "\e6a3";
		font-weight: 400;
		// position: absolute;
		// font-size: 16px;
		color: rgb(160, 160, 160);

		line-height: 70upx;
		font-size: 32upx;
		width: 30upx;

		text-align: center;
		margin-top: 6upx;
		// top: 0;
		// bottom: 0;
		// right: 20px;
		// margin: auto;
	}

	.text_align {
		text-align: right;
		// padding-right: 30px;
	}

	.overLine {
		height: 200upx;
	}

	.red {
		color: red;
	}
	.pickerSAelect {
		text-align: center !important; 
		border-radius: 5upx;
	}
</style>
